<template>
	<view class="message-page">
		<!-- 列表内容 -->
		<z-paging ref="paging" v-model="dataList" :auto="false" :loading-more-enabled="false"
			@refresherTouchend="sendMessage" :refresher-enabled="false" @scroll="onScrollStart">
			<view slot="top">
				<view class="top-box" :style="{paddingTop:$u.addUnit(30 + $u.sys().statusBarHeight,'px')}">
					<image :src="pageBg" class="pageBg" v-if="pageBg"></image>
					<view class="nav-box">
						<!-- <view class="nav-left">通知设置</view> -->
						<view class="nav-center">消息</view>
						<!-- <view class="nav-right"></view> -->
					</view>
					<view class="message-box">
						<view class="talk">对话 <text class="count">({{dataList.length}})</text></view>
						<view class="only-no">只看未回复</view>
					</view>
				</view>
			</view>
			<view class="message-list">
				<u-swipe-action :autoClose="true">
					<u-swipe-action-item :disabled="isScroll||(item.from_user_id==1||item.from_user_id==2||item.from_user_id==3)"
						:options="options" v-for="(item, index) in dataList" :key="index" @click="selectChat" :name="index"
						:ref="'swipeActionItem' + index">
						<view class="message-item" @click.stop="userChat(item,index)">
							<image :src="item.avatar" class="item-left"
								v-if="item.from_user_id==1||item.from_user_id==2||item.from_user_id==3" mode="aspectFill"></image>
							<image :src="item.avatar" :class="item.online?'item-left':'noline item-left'" v-else mode="aspectFill">
							</image>
							<view class="item-right">
								<view class="item-top">
									<view class="item-title">
										<view class="name">{{item.nickname}}</view>
										<view class="sign" v-if="item.from_user_id==1||item.from_user_id==2||item.from_user_id==3">官方
										</view>
										<image src="../../static/common/icon_vip.png" class="icon-vip" v-if="item.vip">
										</image>
									</view>
									<view class="item-time"> {{item.last_time}}</view>
								</view>
								<!-- <view class="item-introduce"> <u-icon name="map-fill" size="16"
				        				color="#9A9A9A"></u-icon>{{item.area}} |
				        			{{item.createtime_text}}
				        		</view> -->
								<view class="item-content">
									<view class="content">{{item.last_message}}</view>
									<u-badge numberType="overflow" max="99" :value="item.unread_msg_count"></u-badge>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</z-paging>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_WSS_URL,
	} from '@/config/app';
	import WebSocketClass from '@/utils/websocket.js';
	const app = getApp();
	export default {
		data() {
			return {
				options: [{
					disabled: false,
					text: '删除'
				}],
				options1: [],
				pageBg: '/static/common/page_bg2.png',
				dataList: [],
				webSocket: null,
				chartConfig: null,
				isScroll: false
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		onLoad() {
			uni.$on('message', this.getMessage)
			uni.$on('connect-success', this.connectSuccess)
		},
		// 页面卸载时取消监听
		onUnload() {
			uni.$off('message', this.getMessage)
			uni.$on('connect-success', this.connectSuccess)
		},
		onShow() {
			if (this.isLogin) {
				this.getInitialize()
			}
			if (app.globalData.socketObj) {
				this.sendMessage()
			}
		},
		methods: {
			onScrollStart() {
				for (var i = 0; i < this.dataList.length; i++) {
					this.$refs['swipeActionItem' + i][0].closeHandler();
				}
				this.isScroll = true
				setTimeout(() => {
					this.isScroll = false
				}, 1000)
			},
			sendMessage() {
				const param = {
					c: "Message",
					a: "session_list"
				}
				if (app.globalData.socketObj) {
					app.globalData.socketObj.sendMsg(param)
				}
			},
			// 接收到消息的回调
			getMessage(msg) {
				let messageData = JSON.parse(msg.data)
				if (messageData.msgtype == "new_message") {
					this.sendMessage()
				}
				if (messageData.msgtype == "message_list") {
					this.dataList = messageData.data
					this.$refs.paging.complete(this.dataList);
				}
			},
			connectSuccess() {
				console.log('连接成功')
				this.sendMessage()
			},
			getInitialize() {
				this.$Api['user'].getInitialize({
					modulename: this.userInfo.username
				}).then(res => {
					this.chartConfig = res.data
					// 如果已登陆，则启用WebSocket
					// 如果已经有sockt实例
					if (app.globalData.socketObj) {
						// 如果sockt实例未连接
						if (!app.globalData.socketObj.isConnect) {
							app.globalData.socketObj.initSocket()
						}
					} else {
						// 如果没有sockt实例，则创建
						app.globalData.socketObj = new WebSocketClass(
							HTTP_WSS_URL +
							`/?modulename=${this.chartConfig.user_info.username}&token=${this.chartConfig.token_list.fastchat_token}&fastchat_user=`,
							10)
						app.globalData.socketObj.initSocket()
					}

				})
			},
			selectChat(event) {
				this.$refs['swipeActionItem' + event.name][0].closeHandler();
				const param = {
					"c": "Message",
					"a": "del_session",
					"data": {
						"session_id": this.dataList[event.name].id
					}
				}
				if (app.globalData.socketObj) {
					app.globalData.socketObj.sendMsg(param)
					this.sendMessage()
				}
			},
			userChat(item, index) {
				if (item.from_user_id == 1 || item.from_user_id == 2) {
					this.$Tips('/pages/message/sys-message?user_id=' + item.from_user_id + "&session_id=" + item.id)
				} else {
					this.$Tips('/pages/message/chart-message?user_id=' + item.from_user_id + "&session_id=" + item.id)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.message-page {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #ffffff;

		.top-box {
			position: relative;

			.pageBg {
				position: absolute;
				top: 0;
				width: 100%;
				height: 176rpx;
			}

			.message-box {
				position: relative;
				z-index: 10;
				padding: 0rpx 30rpx 42rpx;
				font-size: 30rpx;
				color: #323334;
				font-weight: bold;
				display: flex;
				align-items: center;
			

				.talk {
						font-size: 28rpx;
					.count {
						sfont-weight: normal;
						font-size: 24rpx;
						margin: 0 20rpx 0 10rpx;
					}
				}

				.only-no {
					margin-left: 10rpx;
					font-size: 22rpx;
					color: #F169F6;
					padding: 6rpx 20rpx;
					background: #FEECFF;
					border-radius: 6rpx;
				}
			}

			.nav-box {
				padding: 0rpx 30rpx 20rpx;
				position: relative;
				z-index: 10;
				display: flex;
				justify-content: space-between;
				align-content: center;
				font-size: 28rpx;
				color: #323334;

				.nav-left,
				.nav-right {
					flex: 1;
				}

				.nav-center {
					flex: 1;
					font-size: 34rpx;
					text-align: center;
					font-weight: bold;
				}
			}

		}
	}

	.message-list {
		padding: 0 30rpx;
	}

	.message-item {
		display: flex;
		align-items: center;
		margin-bottom: 42rpx;
		box-sizing: border-box;
		// padding: 0rpx 20rpx;
		background: #ffffff;
		

		.noline {
			filter: grayscale(100%);
		}

		.item-left {
			width: 96rpx;
			height: 96rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
		}

		.item-right {
			flex: 1;

			.item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item-title {
					font-size: 32rpx;
					color: #323334;
					display: flex;
					align-items: center;

					.icon-user {
						width: 28rpx;
						height: 28rpx;
						margin-left: 12rpx;
					}

					.name {
						font-weight: bold;
					}

					.sign {
						margin-left: 10rpx;
						font-size: 22rpx;
						height: 32rpx;
						line-height: 32rpx;
						color: #FFFFFF;
						padding:0rpx 10rpx;
						background: #F169F6;
						border-radius: 6rpx;
					}

					.icon-vip {
						margin-left: 12rpx;
						width: 94rpx;
						height: 28rpx;
					}
				}

				.item-time {
					font-size: 24rpx;
					color: #A5A5A5;
				}
			}


			.item-introduce {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #9A9A9A;
				margin-top: 18rpx;
			}

			.item-content {
				font-size: 28rpx;
				color: #A5A5A5;
				margin: 26rpx 0rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.content {
					width: 500rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}


			}
		}
	}
</style>